Первая программа на React

В РАЗРАБОТКЕНЕ ДЛЯ НОВИЧКОВНЕ ОБЯЗАТЕЛЬНО

Разработчику Архитектору

Первая программа на React

React представляет собой библиотеку для создания пользовательских интерфейсов, основанную на компонентном подходе. Создание первой программы позволяет познакомиться с ключевыми концепциями: компонентами, состоянием, JSX и обработкой событий. В данном материале рассматривается создание приложения «Счетчик», демонстрирующее два подхода к реализации: современный функциональный стиль с использованием хуков и классический подход с использованием классовых компонентов.

Создание проекта

Для начала работы требуется среда выполнения JavaScript — Node.js. Она обеспечивает возможность запуска серверной части разработки и управления зависимостями через пакетный менеджер npm.

Процесс инициализации нового проекта выполняется командой в терминале. Система автоматически создаст структуру папок, установит необходимые библиотеки React и настроит инструменты сборки.

npx create-react-app my-first-app
cd my-first-app
npm start

Команда npx выполняет скрипт установки без необходимости глобальной инсталляции. После завершения процесса создается директория my-first-app, содержащая исходный код, конфигурацию и зависимости. Переход в эту директорию (cd) и запуск команды npm start инициируют локальный сервер разработки. Приложение становится доступным по адресу http://localhost:3000.

Функциональный компонент с хуками

Современный стандарт разработки в React использует функциональные компоненты и хуки. Хуки позволяют использовать состояние и другие возможности React внутри обычных функций, что упрощает код и делает его более читаемым.

Основная логика приложения находится в файле src/App.js. Компонент импортирует хук useState из библиотеки React. Этот хук возвращает пару значений: текущее состояние и функцию для его обновления.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(0);

  return (
    <div className="app">
      <h1>Моя первая программа на React</h1>
      
      <div className="greeting">
        <input
          type="text"
          placeholder="Введите ваше имя"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        {name && <h2>Привет, {name}! 👋</h2>}
      </div>

      <div className="counter">
        <h2>Счетчик: {count}</h2>
        <div className="buttons">
          <button onClick={decrement}>-</button>
          <button onClick={reset}>Сброс</button>
          <button onClick={increment}>+</button>
        </div>
      </div>
    </div>
  );
}

export default App;

Хук useState принимает начальное значение и возвращает массив из двух элементов. Первый элемент — это переменная состояния (count, name), второй — функция её изменения (setCount, setName). При вызове функции изменения React перерисовывает компонент, отображая новые данные.

JSX (JavaScript XML) позволяет писать разметку, похожую на HTML, непосредственно внутри JavaScript кода. Выражения внутри фигурных скобок {} вычисляются как JavaScript код. Условный рендеринг {name && <h2>...} отображает заголовок только тогда, когда переменная name содержит не пустое значение.

Обработка событий происходит через атрибуты, начинающиеся с on. Событие onChange срабатывает при изменении содержимого поля ввода. Аргументом функции обратного вызова является объект события, содержащий целевой элемент (target). Значение текущего ввода доступно через свойство value.

Классовый компонент

До появления хуков основным способом создания компонентов был классовой подход. Компоненты наследуются от базового класса Component из библиотеки React. Состояние хранится в свойстве this.state, а методы определяются как стрелочные функции или обычные методы класса.

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: ''
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  decrement = () => {
    this.setState({ count: this.state.count - 1 });
  };

  reset = () => {
    this.setState({ count: 0 });
  };

  handleNameChange = (event) => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <div className="app">
        <h1>Моя первая программа на React</h1>
        
        <div className="greeting">
          <input
            type="text"
            placeholder="Введите ваше имя"
            value={this.state.name}
            onChange={this.handleNameChange}
          />
          {this.state.name && <h2>Привет, {this.state.name}! 👋</h2>}
        </div>

        <div className="counter">
          <h2>Счетчик: {this.state.count}</h2>
          <div className="buttons">
            <button onClick={this.decrement}>-</button>
            <button onClick={this.reset}>Сброс</button>
            <button onClick={this.increment}>+</button>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Конструктор класса вызывает метод super(props) для передачи свойств родительскому классу. Свойство this.state инициализируется объектом, содержащим начальные значения. Метод setState обновляет состояние компонента, вызывая перерисовку. В отличие от функциональных компонентов, где состояние изменяется напрямую функцией, здесь используется метод объекта.

Доступ к состоянию в методе render осуществляется через this.state. Обработчики событий передают ссылки на методы класса, которые должны быть привязаны к контексту экземпляра компонента. Стрелочные функции сохраняют ссылку на this, обеспечивая корректный доступ к свойствам состояния.

Стилизация интерфейса

Внешний вид приложения задается файлом src/App.css. CSS правила определяют расположение, цвета, шрифты и поведение элементов при взаимодействии.

.app {
  text-align: center;
  padding: 40px;
  font-family: Arial, sans-serif;
}

.greeting {
  margin: 30px 0;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 10px;
}

input {
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 5px;
  margin-right: 10px;
}

button {
  margin: 0 5px;
  padding: 10px 20px;
  font-size: 16px;
  background: #61dafb;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #4fa8d5;
  transform: scale(1.05);
}

.counter {
  margin: 30px 0;
  padding: 20px;
  background: #e8f4f8;
  border-radius: 10px;
}

Правило .app центрирует контент и добавляет внутренние отступы. Блок приветствия имеет серый фон и скругленные углы. Поля ввода имеют фиксированный размер шрифта и рамку. Кнопки окрашены в фирменный голубой цвет React, имеют плавный переход цвета и эффект масштабирования при наведении курсора.

Основные концепции приложения

Приложение демонстрирует фундаментальные принципы работы React.

Управление состоянием — это механизм хранения данных, влияющих на отображение интерфейса. Изменение состояния вызывает автоматическое обновление DOM. Хук useState предоставляет простой способ объявления и изменения состояния.

JSX — расширение синтаксиса JavaScript, позволяющее описывать структуру UI. Браузеры не понимают JSX напрямую, поэтому сборщики преобразуют его в обычный JavaScript код перед выполнением.

Обработка событий связывает действия пользователя с логикой приложения. События в React именуются в camelCase (например, onClick вместо onclick). Переданные функции вызываются при наступлении события.

Условный рендеринг позволяет показывать или скрывать элементы в зависимости от условий. Оператор && работает как короткое замыкание: если левая часть ложна, правая часть не вычисляется и не рендерится.

Компоненты представляют собой изолированные единицы кода, отвечающие за конкретный участок интерфейса. Каждый компонент имеет собственное состояние и логику, что способствует переиспользованию кода.

Расширение функционала

Полученное приложение служит базой для дальнейших экспериментов. Разработчики могут добавлять новые функции, изучая механизмы работы с данными и интерфейсом.

Добавление кнопки умножения счетчика на два требует объявления новой функции и подключения её к интерфейсу.

const multiply = () => setCount(count * 2);

<button onClick={multiply}>×2</button>

Создание списка задач (Todo list) предполагает использование массива в качестве состояния. Элементы массива добавляются, удаляются и маркируются как выполненные.

Таймер реализуется с помощью хука useEffect, который запускает интервал при монтировании компонента и очищает его при размонтировании.

Калькулятор демонстрирует работу с несколькими переменными состояния и сложной логикой вычислений.

Пошаговый запуск

Для успешного запуска приложения необходимо выполнить последовательность действий.

Скачайте и установите Node.js с официального сайта nodejs.org.
Откройте терминал или командную строку.
Выполните команду npx create-react-app my-app. Дождитесь окончания установки зависимостей.
Перейдите в созданную директорию командой cd my-app.
Замените содержимое файла src/App.js кодом функционального компонента.
Замените содержимое файла src/App.css стилями из примера.
Запустите локальный сервер командой npm start.

Браузер автоматически откроет страницу приложения. Любые изменения в коде сохраняются и мгновенно отображаются на странице благодаря системе горячей перезагрузки.